<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from "./components/HelloWorld.vue";
</script>

<template>
  <!-- - 在 vue3 中不能直接给坑包裹 transition 和 keep-alive 了 而要借助 插槽的 v-slot 属性 实现
  <component :is="Component" /> 是动态组件 可以包裹 transition 和 keep-alive如下效果中我们用 transition 标签实现页面转场的动画效果 进入页面的时候滑动进入，离开页面的时候旋转离开：transition 标签的 name 属性定义动画的名称，在写样式的时候替换 v-enter 的 v
v-enter  v-enter-active  v-enter-to     v-leave   v-leave-active  v-leave-to  -->
  <router-view v-slot="{ Component }">
    <transition name="page" class="page">
      <component :is="Component" />
    </transition>
  </router-view>
</template>
<style>
.page {
  width: 100%;
  height: 300px;
  position: absolute;
  left: 0px;
  top: 0;
  background: #0000;
}
/* 进入动画的效果 */
.page-enter-active {
  animation: donghua 2s;
}
@keyframes donghua {
  0% {
    transform: translateX(100%);
  }
  /* 100% {
    transform: translate(0%);
  } */
  100% {
    transform: translate(0%) rotate(360deg);
  }
}
/* 离开的状态 */
.page-leave-active {
  animation: donghual 0.5s;
}
@keyframes donghual {
  0% {
    transform: translateX(100);
  }
  100% {
    transform: translateX(-100%) rotate(-180deg);
  }
}
</style>
